<template>
  <div class="novel-card tomato-style" @click="goToDetail">
    <!-- 封面图片 -->
    <div class="card-cover">
      <img :src="novel.cover" :alt="novel.title" class="cover-image" />
      <div class="cover-overlay">
        <div class="overlay-content">
          <el-button type="primary" size="small" circle>
            <el-icon><Reading /></el-icon>
          </el-button>
          <el-button type="default" size="small" circle @click.stop="toggleBookshelf">
            <el-icon><Star /></el-icon>
          </el-button>
        </div>
      </div>
      <!-- VIP标识 -->
      <div v-if="novel.isVip" class="vip-badge">VIP</div>
      <!-- 推荐原因 -->
      <div v-if="recommendation" class="recommendation-badge">
        {{ recommendation.reason }}
      </div>
    </div>
    
    <!-- 卡片内容 -->
    <div class="card-content">
      <h4 class="novel-title">{{ novel.title }}</h4>
      <p class="novel-author">{{ novel.author }}</p>
      <p class="novel-desc">{{ truncatedDesc }}</p>
      
      <!-- 标签 -->
      <div class="novel-tags">
        <el-tag
          v-for="tag in novel.tags.slice(0, 3)"
          :key="tag"
          size="small"
          type="info"
          effect="plain"
        >
          {{ tag }}
        </el-tag>
      </div>
      
      <!-- 统计信息 -->
      <div class="novel-stats">
        <div class="stat-item">
          <el-icon><View /></el-icon>
          <span>{{ formatNumber(novel.viewCount) }}</span>
        </div>
        <div class="stat-item">
          <el-icon><Star /></el-icon>
          <span>{{ formatNumber(novel.favoriteCount) }}</span>
        </div>
        <div class="stat-item">
          <el-rate :model-value="novel.rating" disabled size="small" />
        </div>
      </div>
      
      <!-- 更新信息 -->
      <div class="update-info">
        <span class="update-time">{{ formatTime(novel.updatedAt) }}</span>
        <span v-if="novel.lastChapterTitle" class="last-chapter">
          {{ novel.lastChapterTitle }}
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import type { Novel, RecommendationItem } from '@/types'
import { useUserStore } from '@/stores/user'

interface Props {
  novel: Novel
  recommendation?: RecommendationItem
}

const props = defineProps<Props>()
const router = useRouter()
const userStore = useUserStore()

// 截断描述文本
const truncatedDesc = computed(() => {
  const maxLength = 80
  if (props.novel.description.length <= maxLength) {
    return props.novel.description
  }
  return props.novel.description.substring(0, maxLength) + '...'
})

/**
 * 格式化数字显示
 */
const formatNumber = (num: number): string => {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + '万'
  }
  return num.toString()
}

/**
 * 格式化时间显示
 */
const formatTime = (timeStr: string): string => {
  const date = new Date(timeStr)
  const now = new Date()
  const diff = now.getTime() - date.getTime()
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
  
  if (days === 0) {
    return '今天更新'
  } else if (days === 1) {
    return '昨天更新'
  } else if (days < 7) {
    return `${days}天前更新`
  } else {
    return date.toLocaleDateString()
  }
}

/**
 * 跳转到小说详情页
 */
const goToDetail = () => {
  router.push(`/novel/${props.novel.id}`)
}

/**
 * 切换书架状态
 */
const toggleBookshelf = async () => {
  if (!userStore.isLoggedIn) {
    ElMessage({
      message: '请先登录',
      type: 'warning',
      duration: 2000,
      showClose: true
    })
    router.push('/auth/login')
    return
  }
  
  try {
    const success = await userStore.addToBookshelf(props.novel.id)
    if (success) {
      ElMessage({
        message: '已加入书架',
        type: 'success',
        duration: 2000,
        showClose: true
      })
    } else {
      ElMessage({
        message: '已在书架中',
        type: 'info',
        duration: 2000,
        showClose: true
      })
    }
  } catch {
    ElMessage({
      message: '操作失败',
      type: 'error',
      duration: 3000,
      showClose: true
    })
  }
}
</script>

<style lang="scss" scoped>
.novel-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
    
    .cover-overlay {
      opacity: 1;
    }
  }
}

.card-cover {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  
  .cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
  
  .cover-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    
    .overlay-content {
      display: flex;
      gap: var(--spacing-md);
    }
  }
  
  .vip-badge {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light));
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: bold;
  }
  
  .recommendation-badge {
    position: absolute;
    bottom: var(--spacing-sm);
    left: var(--spacing-sm);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
  }
}

.card-content {
  padding: var(--spacing-lg);
}

.novel-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
  line-height: var(--line-height-tight);
  
  // 文本溢出处理
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.novel-author {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-sm);
}

.novel-desc {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  margin-bottom: var(--spacing-md);
  
  // 文本溢出处理
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.novel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
}

.novel-stats {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  
  .stat-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--text-tertiary);
    font-size: var(--font-size-xs);
    
    .el-icon {
      font-size: 14px;
    }
  }
}

.update-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  
  .last-chapter {
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

// 番茄风格移动端优化
@media (max-width: 768px) {
  .novel-card.tomato-style {
    background: var(--tomato-card-bg);
    border-radius: var(--tomato-radius-large);
    box-shadow: var(--tomato-shadow-card);
    border: 1px solid var(--tomato-border);
    transition: var(--tomato-transition);
    overflow: hidden;
    margin-bottom: var(--tomato-space-md);
    border: none;
    box-shadow: var(--tomato-shadow-card);
    
    &:active {
      transform: scale(0.98);
      box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);
    }
    
    .card-cover {
      height: 180px;
      border-radius: var(--tomato-radius-medium) var(--tomato-radius-medium) 0 0;
      
      .cover-image {
        transition: var(--tomato-transition);
      }
      
      .cover-overlay {
        background: linear-gradient(45deg, rgba(0,0,0,0.7), rgba(0,0,0,0.3));
        backdrop-filter: blur(2px);
        
        .overlay-content {
          gap: var(--tomato-space-md);
          
          .el-button {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            box-shadow: var(--tomato-shadow-button);
            border: none;
            
            &.el-button--primary {
              background: var(--tomato-primary);
            }
            
            &.el-button--default {
              background: rgba(255, 255, 255, 0.9);
              color: var(--tomato-text-primary);
            }
          }
        }
      }
      
      .vip-badge {
        background: linear-gradient(135deg, var(--tomato-primary), var(--tomato-primary-dark));
        border-radius: var(--tomato-radius-small);
        padding: var(--tomato-space-xs) var(--tomato-space-sm);
        font-size: 10px;
        font-weight: 700;
        box-shadow: 0 2px 4px rgba(255, 107, 53, 0.3);
      }
      
      .recommendation-badge {
        background: rgba(0, 0, 0, 0.8);
        border-radius: var(--tomato-radius-small);
        padding: var(--tomato-space-xs) var(--tomato-space-sm);
        font-size: 10px;
        backdrop-filter: blur(4px);
      }
    }
    
    .card-content {
      padding: var(--tomato-space-lg);
      
      .novel-title {
        font-size: 16px;
        font-weight: 700;
        color: var(--tomato-text-primary);
        margin-bottom: var(--tomato-space-xs);
        line-height: 1.3;
        
        // 限制行数
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      
      .novel-author {
        color: var(--tomato-text-secondary);
        font-size: 12px;
        margin-bottom: var(--tomato-space-sm);
        font-weight: 500;
      }
      
      .novel-desc {
        color: var(--tomato-text-secondary);
        font-size: 12px;
        line-height: 1.4;
        margin-bottom: var(--tomato-space-md);
        
        // 限制行数
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      
      .novel-tags {
        gap: var(--tomato-space-xs);
        margin-bottom: var(--tomato-space-md);
        
        .el-tag {
          border-radius: var(--tomato-radius-small);
          font-size: 10px;
          padding: 2px var(--tomato-space-xs);
          border: 1px solid var(--tomato-border);
          background: rgba(0, 0, 0, 0.02);
        }
      }
      
      .novel-stats {
        gap: var(--tomato-space-md);
        margin-bottom: var(--tomato-space-md);
        
        .stat-item {
          gap: var(--tomato-space-xs);
          color: var(--tomato-text-disabled);
          font-size: 10px;
          
          .el-icon {
            font-size: 12px;
          }
          
          .el-rate {
            .el-rate__item {
              margin-right: 1px;
              
              .el-rate__icon {
                font-size: 12px;
              }
            }
          }
        }
      }
      
      .update-info {
        font-size: 10px;
        color: var(--tomato-text-disabled);
        
        .update-time {
          font-weight: 500;
        }
        
        .last-chapter {
          max-width: 50%;
          font-weight: 400;
        }
      }
    }
  }
}
</style> 